<template>
    <div>
        <!-- <div id="chart" class="chart" style="height:350px;"></div> -->
        <!-- <div class="details"> -->
        <el-form ref="editForm" :model="formFileds" label-position="left">
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="年份" prop="years">
                        <el-select v-model="formFileds.years">
                            <el-option v-for="item in dateOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="案件类型" prop="things">
                        <el-select v-model="formFileds.things" clearable>
                            <el-option label="个人" value="个人"></el-option>
                            <el-option label="企业机构" value="企业机构"></el-option>
                            <el-option label="司法机构" value="司法机构"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-button type="primary" class="pull-right">
                            导出
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>

            <div>
                <div id="chart2" class="chart" style="margin-top:5px"></div>
            </div>

        </el-form>
        <!--表格内容-->
        <el-table v-if="selectdate == 'year'" ref="listyear" :data="yearData" style="width: 100%;margin-bottom: 5px;"
            border :span-method="yeararraySpanMethod">
            <el-table-column property="year" label="年份" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="selectYear(scope.row.year)">{{ scope.row.year }}</el-button>
                </template>
            </el-table-column>
            <el-table-column property="Falltypus" label="案件类型" align="center">
            </el-table-column>
            <el-table-column property="Traffic" label="案件数量" align="center">
            </el-table-column>
            <el-table-column property="actualIncome" label="实际收入" align="center">
            </el-table-column>
        </el-table>

        <div v-if="selectdate == 'month'">
            <el-button type="text" @click="selectmonth">明 细</el-button>
            <el-table ref="listmonth" :data="monthData" style="width: 100%;margin-bottom: 5px;" border>
                <el-table-column property="month" label="月份" align="center">
                </el-table-column>
                <el-table-column property="Traffic" label="案件数量" align="center">
                </el-table-column>
                <el-table-column property="actualIncome" label="实际收入" align="center">
                </el-table-column>
            </el-table>
        </div>



        <el-table v-if="selectdate == 'list'" ref="list" :data="listData" style="width: 100%;margin-bottom: 5px;" border
            :span-method="arraySpanMethod">
            <el-table-column property="month" label="月份" align="center">
            </el-table-column>
            <el-table-column property="Falltypus" label="案件类型" align="center">
            </el-table-column>
            <el-table-column property="Traffic" label="业务数量" align="center">
            </el-table-column>
            <el-table-column property="actualIncome" label="实际收入" align="center">
            </el-table-column>
        </el-table>
        <!-- </div> -->
    </div>
</template>
  
<script>
import sales from '../../../../assets/js/sales';


export default {

    computed: {
        chart () {
            return this.$echarts.init(sales.getDom("chart"));
        }
    },
    data () {
        return {
            dateOptions: [],
            formFileds: {
                years: '',
                things: ''
            },
            yearData: [
                {
                    year: '2022',
                    Falltypus: "个人",
                    Traffic: "",
                    actualIncome: ""
                },
                {
                    year: '2022',
                    Falltypus: "企业机构",
                    Traffic: "",
                    actualIncome: ""
                },
                {
                    year: '2022',
                    Falltypus: "司法机构",
                    Traffic: "",
                    actualIncome: ""
                }
            ],
            monthData: [],
            listData: [],
            selectdate: 'year',
        }
    },
    methods: {
        getyears () {
            var nowDate = new Date()
            var year = nowDate.getFullYear()
            var datelength = parseInt(year - 2020 + 1)
            for (var i = 0; i < datelength; i++) {
                this.dateOptions.push({
                    label: parseInt(2020 + i),
                    value: parseInt(2020 + i)
                })
            }
        },
        getmonth () {
            var month
            for (var i = 0; i < 12; i++) {
                if (i == 0) {
                    month = '一月份'
                } else if (i == 1) {
                    month = '二月份'
                } else if (i == 2) {
                    month = '三月份'
                } else if (i == 3) {
                    month = '四月份'
                } else if (i == 4) {
                    month = '五月份'
                } else if (i == 5) {
                    month = '六月份'
                } else if (i == 6) {
                    month = '七月份'
                } else if (i == 7) {
                    month = '八月份'
                } else if (i == 8) {
                    month = '九月份'
                } else if (i == 9) {
                    month = '十月份'
                } else if (i == 10) {
                    month = '十一月份'
                } else if (i == 11) {
                    month = '十二月份'
                }
                this.monthData.push(
                    {
                        month,
                        Traffic: "",
                        actualIncome: "",
                    },
                )
            }
        },
        yeararraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % 3 === 0) {
                    return {
                        rowspan: 3,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }

        },
        selectYear (year) {
            this.selectdate = 'month'
            this.getmonth()
        },
        selectmonth(){
            this.selectdate = 'list'
            var month
            for (var i = 0; i < 12; i++) {
                if (i == 0) {
                    month = '一月份'
                } else if (i == 1) {
                    month = '二月份'
                } else if (i == 2) {
                    month = '三月份'
                } else if (i == 3) {
                    month = '四月份'
                } else if (i == 4) {
                    month = '五月份'
                } else if (i == 5) {
                    month = '六月份'
                } else if (i == 6) {
                    month = '七月份'
                } else if (i == 7) {
                    month = '八月份'
                } else if (i == 8) {
                    month = '九月份'
                } else if (i == 9) {
                    month = '十月份'
                } else if (i == 10) {
                    month = '十一月份'
                } else if (i == 11) {
                    month = '十二月份'
                }
                this.listData.push(
                    {
                        month,
                        Falltypus: "个人",
                        Traffic: "",
                        actualIncome: "",
                    },
                    {
                        month,
                        Falltypus: "企业机构",
                        Traffic: "",
                        actualIncome: "",
                    },
                    {
                        month,
                        Falltypus: "司法机构",
                        Traffic: "",
                        actualIncome: "",
                    },
                )
            }
        },
        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % 3 === 0) {
                    return {
                        rowspan: 3,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        getEchart () {
            this.chart.setOption({
                title: {
                    text: '销售统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: 'right'
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'tokyo',
                        color: 'blue',
                        data: [20, 25, 42, 52, 62, 72, 20, 45, 65, 80, 66, 60],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    },
                    {
                        name: 'new york',
                        color: 'red',
                        data: [30, 29, 14, 11, 15, 15, 3, 4, 8, 14, 10, 5],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    },
                    {
                        name: 'london',
                        color: 'rgb(255,193,7)',
                        data: [20, 17, 59, 47, 90, 46, 36, 45, 80, 44, 45, 50],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    },
                    {
                        name: 'berlin',
                        color: 'green',
                        data: [17, 15, 91, 34, 70, 60, 20, 45, 65, 40, 66, 60],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    },
                ]
            })
        },
    },
    mounted () {

        // this.getEchart();
        this.getyears();
        this.gettable();

    }
}
</script>
  
<style scoped lang="less">
.el-row {
    margin-top: 20px;
}

.chart {
    width: 100%;

    background-color: #f5f5f5;
    box-shadow: 0 0 5px transparent;


    &:hover {
        box-shadow: 0 0 5px #2EB3FF;
    }
}

.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}

.details {
    margin: 5% 0;
}
</style>
  